<template>
  <a-modal
    :title="dialogTile"
    :width="1000"
    :confirm-loading="confirmloading"
    :mask-closable="false"
    :destroy-on-close="true"
    v-model="dialogVisible"
    @ok="dialogVisible = false"
    @cancel="dialogVisible = false"
  >
    <a-form-model layout="inline" :model="queryParam">
      <a-form-model-item class="mb10" ref="cycle_no" label="分红期数" prop="cycle_no">
        <a-input v-model="queryParam.cycle_no" placeholder="请输入分红期数" allowClear />
      </a-form-model-item>
      <a-form-model-item ref="phone" label="更新时间" prop="phone">
        <a-range-picker @change="dateChange" placeholder="请选择更新时间" allowClear />
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="searchData"> 查询 </a-button>
      </a-form-model-item>
    </a-form-model>
    <a-card :bordered="false">
      <div class="table-operator flex-y-center flex-x-sb">
        <a-radio-group v-model="queryParam.status" @change="statusChange">
          <a-radio-button :value="''"> 全部 </a-radio-button>
          <a-radio-button :value="1"> 已达标 </a-radio-button>
          <a-radio-button :value="3"> 已发放 </a-radio-button>
        </a-radio-group>
        <div>检索结果 {{ totalCount }} 条，共计收入金额 {{ total_money1 }} 元，支出金额 {{ total_money2 }} 元。</div>
      </div>
      <a-table
        style="width: 100%; overflow-x: auto"
        v-if="columns.length"
        ref="tableList"
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.totalCount,
          current: this.pageNo,
          showSizeChanger: true,
          onChange: this.tablePageChange,
          onShowSizeChange: this.paginationSizeChange,
        }"
      >
        <template slot="type" slot-scope="text, record">
          {{ record.type == 1 ? '收入' : record.type == 2 ? '支出' : '-' }}
        </template>
        <template slot="cycle_no" slot-scope="text, record">
          {{ record.cycle_no ? record.cycle_no : '-' }}
        </template>
        <template slot="rate" slot-scope="text, record"> {{ record.price }}/{{ record.rate }} </template>
        <template slot="desc" slot-scope="text, record">
          {{ record.desc ? record.desc : '-' }}
        </template>
        <template slot="status" slot-scope="text, record">
          {{ record.status == 0 ? '待结算' : record.status == 1 ? '已结算' : record.status == 2 ? '已退款' : '-' }}
        </template>
        <template slot="updated_at" slot-scope="text, record">
          {{ record.updated_at ? record.updated_at : '-' }}
        </template>
      </a-table>
    </a-card>
  </a-modal>
</template>
      
      <script>
import { poolLog } from '@/api/plat'
// import { poolUserLog } from '@/api/plat'

export default {
  name: 'pool-list-add-or-edit-user-list',
  data() {
    return {
      dialogTile: '',
      dialogVisible: false,
      confirmloading: false,
      columns: [
        {
          title: '期数',
          dataIndex: 'cycle_no',
          width: 130,
        },
        // {
        //   title: '本池已累计',
        //   dataIndex: 'total',
        //   width: 100,
        // },
        // {
        //   title: '本期额度',
        //   dataIndex: 'pool_now',
        //   width: 100,
        // },
        // {
        //   title: '达标人数',
        //   dataIndex: 'reach_num',
        //   width: 100,
        // },
        {
          title: '类型',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' },
        },
        {
          title: '金额',
          dataIndex: 'money',
        },
        {
          title: '余额',
          dataIndex: 'price',
        },
        {
          title: '描述',
          dataIndex: 'desc',
          scopedSlots: { customRender: 'desc' },
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          width: 120,
        },
        {
          title: '更新时间',
          dataIndex: 'updated_at',
          scopedSlots: { customRender: 'updated_at' },
          width: 150,
        },
      ],
      queryParam: {
        pool_id: undefined,
        cycle_no: '',
        date_time: '',
        status: '',
      },
      loading: false,
      dataSource: [],
      totalCount: 0,
      total_money1: 0,
      total_money2: 0,
      pageNo: 1,
      pageSize: 10,
    }
  },
  methods: {
    handleShow(row) {
      this.dialogTile = ''
      if (!row.id) {
        return this.$message.error('缺少参数，无法查看')
      } else {
        this.queryParam.pool_id = row.id
        this.dialogTile = row.name + '明细'
        this.pageNo = 1
        this.getList()
        this.dialogVisible = true
      }
    },
    async getList() {
      var newObj = {}
      newObj = { ...this.queryParam, pageNo: this.pageNo, pageSize: this.pageSize }
      this.loading = true
      const res = await poolLog(newObj)
      this.loading = false
      if (!res.code) {
        this.dataSource = res.data.data
        this.totalCount = res.data.totalCount
        this.total_money1 = res.data.total_money1
        this.total_money2 = res.data.total_money2
      }
    },
    searchData() {
      this.pageNo = 1
      this.getList()
    },
    tablePageChange(e) {
      this.pageNo = e
      this.getList()
    },
    paginationSizeChange(current, size) {
      this.pageNo = current
      this.pageSize = size
      this.getList()
    },
    statusChange(e) {
      this.queryParam.status = e.target.value
      this.getList()
    },
    dateChange(date, dateString) {
      this.queryParam.date_time = dateString[0]!='' ? `${dateString[0]}/${dateString[1]}` : ''
      // this.getList()
    },
  },
}
</script>
    
    <style lang="less" scoped>
.table-operator {
  margin-top: 10px;
}
/deep/.ant-card-body {
  padding: 0 !important;
}
/deep/.ant-form-item-control-wrapper {
  min-width: 100px !important;
}
/deep/.ant-table-body {
  min-height: 360px;
}
.slotTable {
  /deep/.ant-table-row-cell-break-word {
    padding: 2px 8px !important;
  }
  /deep/.ant-table-body {
    min-height: 0px;
  }
}

/deep/.ant-table-body::-webkit-scrollbar {
  display: none; /*ChromeSafari*/
}

.of_el {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: Ellipsis;
}

.table_operator_icon {
  font-size: 18px;
  padding: 0 5px;
  color: rgb(182, 182, 182);
  cursor: pointer;
  &:hover {
    color: rgb(24, 144, 255);
  }
}

.goods-info {
  display: flex;
  align-items: flex-start;
  position: relative;
  .goods-pic {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    display: block;
  }
  .info-box {
    margin-left: 24px;
    margin-right: 5px;
    .goods-name {
      // width: 185px;
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.65);
      white-space: nowrap;
      text-overflow: Ellipsis;
      overflow: hidden;
    }
  }
  .item-edit-box {
    width: 15px;
    height: 100%;
    position: absolute;
    right: -12px;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.goods-price-row {
  position: relative;
  display: inline-block;
  .row-price-edit {
    position: absolute;
    right: -27px;
    top: 0;
    width: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.goods-rest-row {
  position: relative;
  display: inline-block;
  .row-rest-edit {
    position: absolute;
    right: -27px;
    top: 0;
    width: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.goods-virtual-row {
  position: relative;
  display: inline-block;
  .row-virtual-edit {
    position: absolute;
    right: -27px;
    top: 0;
    width: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.goods-type {
  min-width: 60px;
  display: inline-block;
}
.table-action {
  min-width: 93px;
  display: inline-block;
}

.flexBox {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  .inp {
    width: 426px;
    border-radius: 2px 0 0 2px;
  }

  .text {
    width: 42px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #d9d9d9;
    border-radius: 0 2px 2px 0;
    border-left: 0;
    background: #f7f7f7;
  }
}

.formFlex {
  display: flex;
  align-items: center;

  i {
    color: #ff0000;
    font-style: normal;
  }

  span {
    margin-right: 10px;
  }
}

.mb10 {
  margin-bottom: 10px;
}
</style>
    
      